<template>
  <div id="printInList">
    <div class="print-content" v-for="(item, index) in printList" :key="index">
      <p class="title">重大科技基础设施项目档案案卷目录</p>
      <p class="page">
        <span>共</span><span>{{ pages }}</span
        ><span>页</span><span>第</span><span>{{ index + 1 }}</span
        ><span>页</span>
      </p>
      <table class="custom-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>案卷号</th>
            <th>项目名称</th>
            <th>案卷题名</th>
            <th>页数</th>
            <th>起止日期</th>
            <th>编制部门</th>
            <th>保管期限</th>
            <th>密级</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in item" :key="index">
            <td>{{ JSON.stringify(row) !== '{}' ? index + 1 : '' }}</td>
            <td>{{ row.code }}</td>
            <td>{{ JSON.stringify(row) !== '{}' ? '合成生物大设施' : '' }}</td>
            <td></td>
            <td>{{ row.filePages }}</td>
            <td>{{ row.byDate }}</td>
            <td>{{ row.toDepartmentName }}</td>
            <td>{{ filterRow(row.retentionPeriodDate, 'DMS_ARCHIVES_FILE_LIST_RETENTION_PERIOD_DATE') }}</td>
            <td>{{ filterRow(row.secretLevel, 'SECRET_LEVEL') }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue';
import { formInfoStore } from '@/store/modules/form';

const props = defineProps({
  list: {
    type: Array
  },
  pages: {
    type: Number
  }
});

const printList = computed(() => {
  return props.list.map((item: any) => {
    if (!Array.isArray(item)) return [];
    // 固定一个表格10行
    if (item.length == 0) {
      item.length = 10;
      item.fill({});
    } else if (item.length < 10) {
      for (let i = item.length; i < 10; i++) {
        item.push({});
      }
    }
    return item;
  });
});

const dictionary = formInfoStore().getDictionary;
function filterRow(data, filterName) {
  return dictionary[filterName][data];
}
</script>
<style lang="less" scoped></style>
